/**
 * Created by 小敏哥 on 2017/6/16.
 */
import React, {Component} from 'react';
import style from './index.scss';
import ProcessDetailTitle from '../../components/processDetail/processDetailTitle';
import AlipayJSOperation from '../../utils/alipayJSOperation';
import PageBar from '../../components/common/pageBar';
class OverLineProcessDetail extends Component {
    constructor(props) {
        super(props);
        this.state={
            loaded:false,
            containerHeight:'100%'
        }
    }
    //返回主页
    goBack(){
        history.go(-1);
    }
    componentDidMount() {
        if(location.href.match(/^\S+overLineProcessDetail$/)&&location.href.match(/^\S+overLineProcessDetail$/).length>0) {
            AlipayJSOperation.setRightButtonStatus(false);
            AlipayJSOperation.setTitle('办理流程');
            document.querySelector("title").innerHTML = "办理流程";
        }
        //首页隐藏标题栏右键
        /* AlipayJSOperation.setRightButtonStatus(false);
         AlipayJSOperation.setTitle('年检代办详细流程');
         //设置标题颜色
         AlipayJSOperation.setBarColor('#2FB3FE');
         setTimeout(()=>{
         this.setState({
         loaded:true,
         })
         },50)*/
    }

    setMainClassName(){
        //  return this.state.loaded?style.container+' '+style.sliderUp:style.container;
        return style.container;
    }

    goHomeBySlider(endCallBack){
        this.setState({
            loaded:false
        });
        setTimeout(()=>{this.goBack();},500)
    }

    render() {
        let containerStyle={
            height:this.state.containerHeight
        };

        return  <div style={containerStyle} className={this.setMainClassName()}>
            {location.href.match(/^\S+overLineProcessDetail$/)&&location.href.match(/^\S+overLineProcessDetail$/).length>0?<PageBar title="办理流程" />:''}
            {/*<ScrollContainer width="100%" background="white" height={(window.innerHeight- 73)+'px'} noScaleTop={false}
             noScaleBottom={true} maxMove={50}
             topText={{ before: "下拉返回首页", middle: "释放返回首页", after: "正在跳转" }}
             topReleaseEvent={(endCallBack) => {
             this.goHomeBySlider(endCallBack)
             }}>*/}
            <div className={style.carCondition}>
                <div>车辆要求</div>
                <ol>
                    <li>1、外观与行驶证照片中车辆保持一致，保持车身整洁、漆面完整；</li>
                    <li>2、不可以私自改装灯光系统，保证各灯光正常工作；</li>
                    <li>3、前排侧窗后视镜位置的三角区域不允许贴膜；</li>
                    <li>4、同轴轮胎花纹应一致，胎面磨损不严重，尺寸与原车一致；</li>
                    <li>5、灭火器和三角警告牌是必备物品；</li>
                </ol>
            </div>
            <div className={style.contentContainer}>
                <ProcessDetailTitle title="准备材料" titleImg="./images/procedure_pic_A.png"/>
                <div className={style.contentDiv}>
                    <div className={style.left}></div>
                    <div className={style.content}>
                        <p>请将以下年检代办所需材料备齐：</p>
                        <p>1、车辆行驶证原件正副本；</p>
                        <p>2、有效期内交强险副本原件；</p>
                        <p>3、有效期内车船税发票原件</p>
                        <p>（如交强险含车船税，则无需提供）；</p>

                    </div>
                </div>

                <ProcessDetailTitle title="约定取车" titleImg="./images/procedure_pic_B.png"/>
                <div className={style.contentDiv+ ' ' + style.imgContent}>
                    <div className={style.left}></div>
                    <div className={style.content}>
                        <p>车行易管家与您约定时间地点取车并代驾前往监测站</p>
                    </div>
                </div>
                <ProcessDetailTitle title="年审办理" titleImg="./images/procedure_pic_C.png"/>
                <div className={style.contentDiv}>
                    <div className={style.left}></div>
                    <p className={style.content}>车行易管家将现场为您代办年检手续。</p>
                </div>
                <ProcessDetailTitle title="办理完成" titleImg="./images/procedure_pic_D.png"/>
                <div className={style.contentDiv}>
                    <div className={style.lastLeft}></div>
                    <p className={style.content}>年检通过之后我们将第一时间归还车辆及相关资料。</p>
                </div>
            </div>
            {/*  </ScrollContainer>*/}
            {/* <div className={style.buttonDiv}>
             <button onClick={this.goBack}>返回</button>
             </div>*/}
        </div>
    }
}

export default OverLineProcessDetail;